@charset "utf-8";
@import "reset";
@import "iconfont";
//把px转化为rem的函数
@function r($px){
    @return $px/40*1rem;
}
@mixin aImg{
    overflow: hidden;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
.games_web{
    width: 100%;
    height: 100%;
    overflow: hidden;
    //  导航栏
    .games_nav{
        width: 100%;
        height: 30px;
        background: #222;
        border-bottom: 1px solid #222;
        z-index: 9999;
        position: fixed;
        .BG_bg{
            background: #222222;
        }
        .nav_fluid{
            width: 70%;
            height: 30px;   
            .nav_log{
                width: 150px;
                margin-top: -5px;
                img{
                     width: 100%;
                }
            }
            .nav_hone{
                ul{
                    .active{
                        a{
                            background: #111;
                            color: white;
                        }
                    }
                    li{
                        a{
                            font-size: r(16);
                        }
                        a:hover{
                            color: #ccc;
                        }
                        .toggle_bg{
                            background: #222222;
                            li a{
                                background: #222;
                                color: #eee;
                                &:hover{
                                    background: #ccc;
                                    color: #666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    //  主体
    .game_main{
         margin-top: 50px;
//       热门
        .main_hot{
            width: 70%;
            margin: 0 auto;
            padding-bottom: 50px;
//          猎刃2
            .row_top{
                padding-bottom: 50px;
                &>div:nth-child(1){
                    &>div:nth-child(2){
                        margin-top: -25px;
                        >div{
                            width: r(335);
                            height: r(425);
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
                &>div:nth-child(2){
                    &>div:nth-child(1){
                        text-align: right;
                        line-height: 25px;
                        h3{
                            margin-top: 30px;
                        }
                        p{
                            font-size: r(13);
                            color: #898989;
                        }
                    }
                    .pic_liebiao{
                        margin-top: 20px;
                        &>div:nth-child(1){
                            div{
                                width: 100%;
                                img{
                                    width: 100%;
                                }
                                &:hover{
                                        background: #fff;
                                        opacity: .8;
                                }
                            }
                        }
                        &>div:nth-child(2){
                            div{
                                width: 100%;
                                img{
                                    width: 100%;
                                }
                                &:hover{
                                        background: #fff;
                                        opacity: .8;
                                }
                            }
                        }
                    }
                }
            }
//          上吧主公
            .row_bottom{
                &>div:nth-child(1){
                    &>div:nth-child(1){
                        text-align: left;
                        line-height: 30px;
                        h3{
                            margin-top: 30px;
                        }
                        p{
                            font-size: r(13);
                            color: #898989;
                        }
                    }
                    .pic_liebiao{
                        margin-top: 20px;
                        &>div:nth-child(1){
                            div{
                                width: 100%;
                                img{
                                    width: 100%;
                                    }
                                &:hover{
                                    background: #fff;
                                    opacity: .8;
                                }
                            }
                        }
                        &>div:nth-child(2){
                            div{
                                width: 100%;
                                img{
                                    width: 100%;
                                }
                                &:hover{
                                        background: #fff;
                                        opacity: .8;
                                }
                            }
                        }
                    }
                }
                &>div:nth-child(2){
                    &>div{
                        >div{
                            margin-top: 50px;
                            width: r(335);
                            height: r(460);
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
//      更多案例
        .gengduo{
           width: 70%;
           margin: 0 auto; 
           &>:nth-child(1){
               h3{
                   margin: 30px 0;
               }
           }
           &>:nth-child(2){
               div{
                    text-align: center;
                    line-height: 20px;
                    border-radius:5px ;
                    position: relative;
                    overflow: hidden;
                   &>div:nth-child(1){
                        width: 100%;
                        img{
                            width: 100%;
                        }
                        &:hover{
                                background: #fff;
                                opacity: .8;
                        }
                        .text{
                            transform: translatex(-100%);
                            position: absolute;
                            transition: all .8s;
                            left: 0;
                            top: 0;
                            height: r(135);
                            color: #fff;
                            margin-top: -1px;
                            text-align: none;
                            background: rgba(0,0,0,0.6);
                        }
                        &:hover .text{
                            transform: translatex(0);
                        }
                    }
                    p{
                       font-size: r(16);
                       margin-top: 10px;
                       margin-bottom: 30px;
                   }
               }
           }
        }
    }
  //   版权
    .games_copy{
        width: 100%;
        height:100px;
        background: #3b3b3b;
        overflow:hidden ;
        position: relative;
        .copy_left{
            width: 70%;
            margin: 0 auto;
            margin-top: r(20);
            .left_son1{
                ul{
                    li{
                        display: inline-block;
                        margin-right: r(15);
                        a{
                            font-size: r(16);
                            color: #a1a3ab;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                }
            }
            .left_son2{
                margin-top: r(15);
                p{
                    font-size: r(16);
                    color: #a1a3ab;
                }
            }
        }
        .copy_right{
            position: absolute;
            right: 18%;
            top: 30%;
            ul{
                li{
                    margin-left: r(10);
                    display: inline-block;
                    div{
                        width: r(40);
                        height: r(40);
                        border-radius:50% ;
                        background: #d8d8e0;
                        line-height:r(40);
                        text-align: center;
                        i{
                            color: #4c4c52;
                            font-size: r(25);
                            display: block;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
//媒体查询
@media only screen and (max-width:768px){
    .games_web{
        width: 100%;
        
//      导航栏
        .games_nav{
            width: 100%;
            .nav_fluid{
                width: 100%;
                .navbar-toggle {
                    padding: 5px 5px;
                }
                .nav_log{
                    img{
                        width: 70%;
                    }
                }
            }
        }
//      主体部分
        .game_main{
            width: 100%;
//          热门
            .main_hot{
                width: 100%;
                .row_top{
                    width: 100%;
                }
                .row_bottom{
                    width: 100%;
                }
            }
            .gengduo{
                width: 100%;
                margin-left: 10px;
                div:nth-child(1){
                    width: 100%;
                }
                div:nth-child(2){
                    width: 100%;
                    div{
                        width: 50%;
                    }
                }
            }
        }
//      版权
        .games_copy{
            width: 100%;
            .copy_right{
                display: none;
            }
        }
    }
}
